{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
<!--    <script src="../static/js/jquery-2.1.4.min.js"></script>-->
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
    <script src="../static/layui/layui.js"></script>

{% endblock %}

{% block content %}
    <div class="container-fluid content-top-gap">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb my-breadcrumb">
                <li class="breadcrumb-item"><a href="/index">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">个人信息</li>
            </ol>
        </nav>
        <div class="welcome-msg pt-3 pb-4">
            <h1>Hi <span class="text-primary">{{ username }}</span>,欢迎回来！</h1>
        </div>
        <div class="grid_wrapper">
            <div class="g_12 separator"><span></span></div>

            <div class="layui-form">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th id="id">{{ user.id }}</th>

                    </tr>
                    </thead>
                    <tbody>

                    <tr>
                        <td>姓名</td>
                        <td><input type="text" id="username" value="{{ user.name }}"/></td>
                    </tr>
                    <tr>
                        <td>联系方式</td>
                        <td><input type="text" id="phone" value="{{ user.phone }}"/></td>

                    </tr>
                    <tr>
                        <td>角色</td>
                        <td>{{ user.description }}</td>

                    </tr>

                    <tr>
                        <td>创建时间</td>
                        <td>{{ user.create_time| date:'Y-m-d H:i:s' }}</td>

                    </tr>
                    <tr>
                        <td>最后修改时间</td>
                        <td>{{ user.modify_time| date:'Y-m-d H:i:s' }}</td>
                    </tr>
                    <tr>
                    </tbody>
                </table>
                <button  class="layui-btn" id="submit">提交</button>
            </div>
        </div>

    </div>

{% endblock %}
{% block script %}
<script>
 layui.use(['element', 'layer'], function () {
            var layer = layui.layer;
            $(function () {
                $("#submit").click(function () {
                    var id = $('#id').text()
                    var username = $("#username").val();
                    var phone = $("#phone").val();
                    if ("" == username || undefined == username) {
                        layer.msg("姓名不能为空", {icon: 7});
                        return
                    }
                    if ("" == phone || undefined == phone) {
                        layer.msg("密码不能为空", {icon: 7});
                        return
                    }
                    $.ajax({
                        type: 'POST',
                        url: "/user/edit_user",
                        dataType: 'json', //服务端返回json格式的数据
                        data: {'username': username, 'phone': phone,'id':id},
                        success: function (data) { // 这里的data就是返回的json格式的数据
                            layer.msg('修改成功!',{icon:6})
                            setTimeout(function () {
                                 window.location.href = '/personal'
                            },1000)

                        },

                    });

                })

            })
        })
</script>
{% endblock %}
